/**
 * 指数和周期选择器组件
 */

import React from 'react';

interface IndexOption {
  code: string;
  name: string;
}

interface PeriodOption {
  value: string;
  label: string;
}

interface IndexSelectorProps {
  selectedIndex: string;
  selectedPeriod: string;
  onIndexChange: (code: string) => void;
  onPeriodChange: (period: string) => void;
}

const IndexSelector: React.FC<IndexSelectorProps> = ({
  selectedIndex,
  selectedPeriod,
  onIndexChange,
  onPeriodChange,
}) => {
  const indexes: IndexOption[] = [
    { code: '000001.SH', name: '上证指数' },
    { code: '399001.SZ', name: '深证成指' },
    { code: '399006.SZ', name: '创业板指' },
    { code: 'HSI', name: '恒生指数' },
  ];

  const periods: PeriodOption[] = [
    { value: '1m', label: '分时' },
    { value: '5m', label: '5分钟' },
    { value: '1d', label: '日K' },
    { value: '1w', label: '周K' },
    { value: '1M', label: '月K' },
  ];

  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
      {/* 指数选择 */}
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <span style={{ fontSize: '14px', color: '#666', fontWeight: '500' }}>指数:</span>
        <div style={{ display: 'flex', gap: '6px' }}>
          {indexes.map((index) => (
            <button
              key={index.code}
              onClick={() => onIndexChange(index.code)}
              style={{
                padding: '6px 12px',
                borderRadius: '6px',
                border: '1px solid',
                borderColor: selectedIndex === index.code ? '#1890ff' : '#e0e0e0',
                backgroundColor: selectedIndex === index.code ? '#e6f7ff' : 'white',
                color: selectedIndex === index.code ? '#1890ff' : '#666',
                fontSize: '13px',
                fontWeight: selectedIndex === index.code ? '600' : '500',
                cursor: 'pointer',
                transition: 'all 0.2s',
              }}
              onMouseEnter={(e) => {
                if (selectedIndex !== index.code) {
                  e.currentTarget.style.backgroundColor = '#fafafa';
                  e.currentTarget.style.borderColor = '#d0d0d0';
                }
              }}
              onMouseLeave={(e) => {
                if (selectedIndex !== index.code) {
                  e.currentTarget.style.backgroundColor = 'white';
                  e.currentTarget.style.borderColor = '#e0e0e0';
                }
              }}
            >
              {index.name}
            </button>
          ))}
        </div>
      </div>

      {/* 周期选择 */}
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <span style={{ fontSize: '14px', color: '#666', fontWeight: '500' }}>周期:</span>
        <div style={{ display: 'flex', gap: '4px' }}>
          {periods.map((period) => (
            <button
              key={period.value}
              onClick={() => onPeriodChange(period.value)}
              style={{
                padding: '4px 10px',
                borderRadius: '4px',
                border: '1px solid',
                borderColor: selectedPeriod === period.value ? '#52c41a' : '#e0e0e0',
                backgroundColor: selectedPeriod === period.value ? '#f6ffed' : 'white',
                color: selectedPeriod === period.value ? '#52c41a' : '#999',
                fontSize: '12px',
                fontWeight: selectedPeriod === period.value ? '600' : '500',
                cursor: 'pointer',
                transition: 'all 0.2s',
              }}
              onMouseEnter={(e) => {
                if (selectedPeriod !== period.value) {
                  e.currentTarget.style.backgroundColor = '#fafafa';
                  e.currentTarget.style.borderColor = '#d0d0d0';
                }
              }}
              onMouseLeave={(e) => {
                if (selectedPeriod !== period.value) {
                  e.currentTarget.style.backgroundColor = 'white';
                  e.currentTarget.style.borderColor = '#e0e0e0';
                }
              }}
            >
              {period.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default IndexSelector;


